<template>
	<view class="page_box">
		<!-- <u-navbar :is-back="false" title="首页" v-if="1" :border-bottom="false"></u-navbar> -->
		<view class="bgc-nr login-box">
			<view class="center-login">
				<!-- <view class="flex align-end header-title mb108 mt295 ml92">
                    <view class="">登录</view>
                    <view class="f30 ml40" style="opacity: 0.5;" @click="l.to('/pages/register/register')">注册</view>
                </view> -->

				<view v-if="textFont == 1" @click="textFont = 2" class="flex align-end header-title mb108 mt295 ml92">
					<view class="">登录</view>
					<view class="f30 ml40" style="opacity: 0.5;">注册</view>
				</view>

				<view v-if="textFont == 2" @click="textFont = 1" class="flex align-end header-title mb108 mt295 ml92">
					<view class="">注册</view>
					<view class="f30 ml40" style="opacity: 0.5;">登录</view>
				</view>

				<view class="h110 ww80 lh110 flex bor-btn align-center">
					<image class="w34 h34 mr14" src="../../static/login/phone.png" mode="aspectFill"></image>
					<view class=" flex align-center">
						<view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;"></view>
						<input
							type="number"
							placeholder="请输入手机号"
							v-model="phone"
							placeholder-style="color: #999999;
							font-family: PingFang SC; fonst-size: 28rpx"
						/>
					</view>
				</view>
				<view class="h110 ww80 lh110 flex bor-btn align-center">
					<image class="w34 h34 mr14" src="../../static/login/ps.png" mode="aspectFill"></image>
					<view class=" flex align-center justify-between">
						<view class="flex align-center">
							<view class="w1 h26 pl23" style="border-left: 1rpx solid #898F7B;"></view>
							<input
								type="number"
								v-model="codeInit"
								placeholder="请输入验证码"
								placeholder-style="color: #999999; font-family: PingFang SC; fonst-size: 28rpx"
								style="color: #FFFFFF;"
							/>
						</view>
						<view class="">
							<text v-if="cede" @click="sendCode" class="f28" style="color: #40C6A8;">发送验证码</text>
							<text v-else class="f28" style="color: #40C6A8;">{{ time }}s后重试</text>
						</view>
					</view>
				</view>

				<view class="btn-bgc mb336" v-if="textFont == 1">
					<button type="default" @click="goToHome" class="cu-btn mt194 r40 h80 ww80 ">
						<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs" v-if="IslogInload"></text>
						<text>登录</text>
					</button>
				</view>

				<view class="btn-bgc mb336" v-if="textFont == 2">
					<button type="default" @click="goToHome" class="cu-btn mt194 r40 h80 ww80 "><text>注册</text></button>
				</view>

				<view class="mt336 btn-text">
					<view class="ww80 flex" style="margin:336rpx auto 111rpx;">
						<view class=" mr10">
							<view style="width: 30rpx; height: 30rpx;" class="cuIcon-roundcheck mt8" v-if="check" @click="check = !check"></view>
							<view style="width: 30rpx; height: 30rpx;" class="cuIcon-roundcheckfill mt8" v-else @click="check = !check"></view>
						</view>
						<view class="w530" @tap="privacyPopup = true">
							<text>
								登录注册代表同意xx平台
								<text style="color: #40C6A8;">《用户服务协议》</text>
								及
								<text style="color: #40C6A8;">《用户隐私政策》</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="privacyPopup" border-radius="10" width="637" height="900" mode="center">
			<view class="ww100  f28 r10" style="background-color:#fff">
				<view class="mt34 mb37 ww100 pt34 text-center"><text style="font-weight: 600; ">用户隐私政策概要</text></view>
				<view class="pl38 f24 pr38 lh50" style="color: #666666;" @click="l.to('/pages/register/agreement')">
					请您充分阅读并理解
					<text style="color: #40C6A8;">《用户服务协议》</text>
					及
					<text style="color: #40C6A8;">《用户隐私政策》</text>
					。
					<view class="">1、在您浏览使用时，我们会收集您的设备信息、操作日志等用于平台安全风控，并申请存储权限用于下载及缓存。</view>

					<view class="">
						2、在您使用上传、分享、连麦等服务时，我们需要获取您设备的摄像头、麦克风、相册、地理位置、存储空间等权限，但该等权限均需经您明示授权才会为实现功能或服务时使用。
					</view>
				</view>
			</view>

			<view class="mt70">
				<view @tap="consentIng" class="w320 h80 lh80 r40 btn mb54" style=" background-color: #FFFFFF;">同意并继续</view>

				<view class="w320 h80 lh80 r40 btn" @tap="closePopup" style="color: #FFFFFF;">不同意</view>
			</view>
		</u-popup>

		<u-popup v-model="consentPopup" border-radius="10" width="637" mode="center">
			<view class="ww100 r10 text-center pb40" style="background-color:#fff">
				<view class="pl38 f24 w500 pr38 lh50 pt45 mb48" style="color: #666666; margin: 0 auto;">您需要同意用户隐私政策概要， 才能继续使用我们的产品及服务。</view>

				<view @tap="back" class="w320 h80 lh80 r40 back mt48 mb40" style="color: #FFFFFF; background-color: #000000;">返回</view>
			</view>
		</u-popup>

		<yy-tip :isCustom="false" />

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {mapState} from "vuex";

export default {
	data() {
		return {
			pas: 2,
			pass: 2,
			cede: true,
			value: '',
			password: '',
			phone: '',
			codeInit: '',
			check: false,
			psord: 'password',
			timestamp: 10,
			time: 60,
			list: [
				{
					name: 'apple',
					disabled: false
				}
			],
			privacyPopup: false,
			consentPopup: false,
			IslogInload: false,
			textFont: 1,
			tt: '',
		};
	},
	computed:{
		...mapState({
			isLogin:state=>state.isLogin,
			isSDKReady:state=>state.isSDKReady
		})
	},
	onShow() {
		this.$store.commit('reset')
	},
	onLoad(e) {
		
		if (e.textFont) {
			this.textFont = e.textFont;
		}
	},
	watch: {
		timestamp(newValue, oldValue) {
			console.log('newValue,==>', newValue);
			console.log(' oldValue==>', oldValue);
		}
	},
	methods: {
		async sendCode() {
			var that = this;
			console.log('this.phone.length==>', this.phone.length);
			if (this.phone.length != 11) return this.l.msgg('手机号不正确');

			let res = await this.$u.get(
				'api/sms/notification-anon/codes',
				{
					phone: this.phone
				},
				{}
			);
			this.l.msgg(res.msg);
			if (res.code == 200) {
				that.cede = false;
				this.tt = setInterval(() => {
					that.time--;
					if (that.time <= 1) {
						clearInterval(this.tt);
						[that.cede, that.time] = [true, 59];
					}
				}, 1000);
			}
		},

		radioChange(e) {
			console.log('e==>', e);
		},

		endTime() {
			this.code = true;
			console.log('this.code==>', this.code);
		},

		cut(index) {
			this.pas = index;
		},

		cuts(index) {
			this.pass = index;
		},

		closePopup() {
			this.consentPopup = true;
			this.privacyPopup = false;
		},

		back() {
			this.consentPopup = false;
			this.privacyPopup = true;
		},

		consentIng() {
			this.privacyPopup = false;
		},

		// 登录成功跳转到首页
		async goToHome() {
			var that = this
			if (this.textFont == 1) {
				if (this.codeInit.length <= 0 || this.phone.length <= 0) return this.l.msgg('手机号验证码不能为空!');
				this.IslogInload = true;
				
				let res = await this.$u.post(
					'api/user/login',
					{
						mobile: this.phone,
						code: this.codeInit,
						loginType: '0'
					},
				);
				this.l.msgg(res.msg);
				this.IslogInload = false;
				if (res.msg == '验证码不正确') {
					clearInterval(this.tt);
					this.time = 60
					this.cede = true
				}
				if (res.code == 200) {
					uni.setStorageSync('userInfo', res.data);
					const userInfo = await this.$u.get('api/user/sig',{
						identifier : res.data.id
					})
					
					let promise = that.tim.login({
						userID: res.data.id + '',
						userSig: userInfo.data
					});
					promise
						.then(function(imResponse) {
							console.log(imResponse.data); // 登录成功
							
							that.$store.commit("toggleIsLogin", true);
							//自己平台的用户基础信息
							uni.setStorageSync('userInfoIm', JSON.stringify(userInfo))
							//tim 返回的用户信息
							uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
							that.l.to('/pages/tab/index')
							
							if (imResponse.data.repeatLogin === true) {
								// 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
								console.log(imResponse.data.errorInfo);
							}
						})
						.catch(function(imError) {
							console.warn('login error:', imError); // 登录失败的相关信息
						});
						
					
					// this.l.to('/pages/tab/index')
					// uni.switchTab({
					// 	url: '/pages/tab/index'
					// });
				}
			} else {
				if (this.codeInit.length <= 0 || this.phone.length <= 0) return this.l.msgg('手机号验证码不能为空!');
				let res = await this.$u.post(
					'api/user/userRegister',
					{
						mobile: this.phone,
						mobileCode: this.codeInit
					},
					{}
				);
				this.l.msgg(res.msg);
				if (res.code == 200) {
					uni.setStorageSync('user', res.data);
					this.l.to('/pages/register/information');
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>

.page_box {
	.login-box {
		width: 100%;
		height: 100%;
		background: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/log.png') no-repeat;
		background-size: 100% 100%;
		

		.center-login {
			// text-align: center;
			// margin: 295rpx 90rpx 0;

			.header-title {
				font-size: 46rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				color: #ffffff;
			}
		}

		.bor-btn {
			font-size: 28rpx;
			color: #ffffff;
			margin: 0 auto;
			font-family: PingFang SC;
			border-bottom: 1rpx solid #3a2d28;
		}

		.btn-bgc {
			width: 100%;
			color: #333333;
			text-align: center;
		}

		.btn-text {
			width: 100%;
			color: #b3b3b3;
			text-align: center;
		}
	}
}

/deep/ .u-mode-center-box[data-v-ece9ae1c] {
	background-color: transparent;

	.btn {
		color: #333333;
		text-align: center;
		margin: 0 auto 57rpx;
	}

	.back {
		color: #333333;
		text-align: center;
		margin: 48rpx auto 0;
	}
}
</style>
